<template>
  <el-container style="display: block">
    <navbar></navbar>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-shopping-cart-1"></i>
              <span>购物车</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分类</template>
              <el-menu-item index="1-1">全部</el-menu-item>
              <el-menu-item index="1-2">在售</el-menu-item>
              <el-menu-item index="1-3">已下架</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <cart_card></cart_card>
        </el-main>
      </el-container>
    </el-container>


    <div style="text-align: right;padding-right: 50px">
      <el-button @click="cartBuy" v-if= "this.$store.state.user.type_id===2?false:true">下单</el-button>
      <el-button @click="cartDel">删除</el-button>
    </div>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="address_list" @row-click="chooseOneAddress">
        <el-table-column property="address_id" label="地址编号" width="150"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
      <el-dialog
        width="30%"
        title="当前地址"
        :visible.sync="innerVisible"
        append-to-body>
        <span>收货地址：{{this.currentAddress}}</span>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="cartInit">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>

  </el-container>

</template>

<script>
import Navbar from "../components/navbar";
import Cart_card from "../components/cart_card";
export default {
name: "cart",
  components: {Cart_card, Navbar},
  data(){
    return{
      userType:false,
      address_list:[],
      dialogTableVisible:false,
      innerVisible:false,
      currentAddress:'',
      currentAddressId:'',
      item_id_list:[]
    }
  },
  methods:{
    cartBuy(){
      this.dialogTableVisible = true;
      this.$store.dispatch('cart/buyItem').then(()=>{
        this.$store.dispatch('items/initOrder').then(()=>{
          this.address_list = this.$store.state.items.address_list;
          this.address_list.splice(0,0);

        })
      })
    },
    cartDel(){
      this.$store.dispatch('cart/deleteItem').then(()=>{
        this.$message.success('删除成功！');
        this.$store.dispatch('cart/getCart').then(()=>{
          console.log('购物车更新成功')
        })
      }).catch(e=>{
        this.$message.error( '删除失败！');
      })
    },
    chooseOneAddress(row){
      this.currentAddress = row.address;
      this.currentAddressId = row.address_id;
      this.innerVisible = true;
      this.$store.state.cart.address_id = this.currentAddressId;
      console.log( this.$store.state.cart.address_id)
      // console.log(this.currentAddress[0].address_id)
    },
    cartInit(){
      this.$store.dispatch('cart/cartInitOrder').then(()=>{
        this.$message.success('下单成功！');
        this.innerVisible = false;
      }).catch(()=>{
        this.$message.error('下单失败！');
      })
    },
    test(){
      console.log(this.item_id_list);
    }
  },
  created() {
    this.$store.dispatch('cart/getCart').then((res)=>{
      this.$message.success('获取购物车信息成功')

    }).catch(e=>{
      this.$message.error('获取购物车信息失败')
    })

  }
}
</script>


<style scoped>

</style>
